<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理端</title>
  <link rel="stylesheet" href="./style3.css">
  <link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.css" rel="stylesheet">
</head>

<body>
  <div class="top">行政审批系统</div>
  <div class="container">
    <div class="lefttable">
      <div class="profilePhoto"></div>
      <div><button type="submit" class="login-button">退出登录</button></div>
      <div class="user active">用户管理</div>
      <div class="check">监察内容管理</div>
      <div class="monitoring">监控管理</div>
    </div>
    <div class="righttable">
      <div class="topbar">用户管理</div>
      <div class="content1">
        <!-- <div class="content1Top">共有数据<span>0</span>条</div> -->
        <div class="usermanage">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>对象</th>
                <th>联系方式</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>张三</td>
                <td>123456</td>
                <td>2024</td>
                <td>
                  <button class="frozen">冻结</button>
                  <button class="unfrozen">解冻</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="tableindex">
          <span></span>
          <button class="prev">
            < </button>
              <button class="btn">1</button>
              <button class="next">></button>
              <select name="" id=""></select>
        </div>
      </div>
      <div class="content2">
        <div class="content2-top">
          <span>对象</span>
          <select name="object" id="objectSelect">
            <option value="all">请选择</option>
            <option value="个人">个人</option>
            <option value="企业">企业</option>
          </select>
          <span>类型</span>
          <select name="type" id="typeSelect">
            <option value="all">请选择</option>
            <option value="证照信息监察">证照信息监察</option>
            <option value="行政审批监察">行政审批监察</option>
            <option value="收费监察">收费监察</option>
            <option value="时限监察">时限监察</option>
          </select>
          <button class="search">搜索</button>
          <button class="create">新建监察</button>
        </div>
        <div class="tasklist">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>对象</th>
                <th>类型</th>
                <th>联系方式</th>
                <th>操作</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <div class="tableindex">
          <span></span>
          <button class="prev">
            < </button>
              <button class="btn">1</button>
              <button class="next">></button>
              <select name="" id=""></select>
        </div>
      </div>
      <div class="content3">
        <div class="allcard"></div>
        <div class="tableindex">
          <span></span>
          <button class="prev">
            < </button>
              <button class="btn">1</button>
              <button class="next">></button>
              <select name="" id=""></select>
        </div>
      </div>
    </div>
  </div>
  <!-- 新建监察遮罩层 -->
  <div class="overlay" id="overlay">
    <div class="popup">
      <div class="input">
        <label for="">监察主题</label>
        <input type="text" class="theme" name="theme"></input>
      </div>
      <div class="input">
        <label for="">联系方式</label>
        <input type="text" class="contact" name="contact">
      </div>
      <div class="input">
        <label for="">监察对象</label>
        <select name="object" id="popupObjectSelect">
          <option value="all">请选择</option>
          <option value="个人">个人</option>
          <option value="企业">企业</option>
        </select>
      </div>
      <div class="input">
        <label for="">监察类型</label>
        <select name="type" id="popupTypeSelect">
          <option value="all">请选择</option>
          <option value="证照信息监察">证照信息监察</option>
          <option value="行政审批监察">行政审批监察</option>
          <option value="收费监察">收费监察</option>
          <option value="时限监察">时限监察</option>
        </select>
      </div>
      <div class="input">
        <label for="">备注</label>
        <div id="editor"></div>
      </div>
      <div class="button">
        <button>取消</button>
        <button class="confirm">确定</button>
      </div>
    </div>
  </div>
  <!-- 详情遮罩层 -->
  <div class="overlay" id="detailOverlay">
    <!-- 详情弹窗 -->
    <div class="popup">
      <div class="top3">详情信息</div>
      <div class="input">
        <ul>
          <li>
            <span>当前状态：</span><span id="applicant"></span>
          </li>
          <li>
            <span>监察主题:</span><span id="acceptance-number"></span>
          </li>
          <li>
            <span>联系方式：</span><span id="acceptance-time"></span>
          </li>
          <li>
            <span>监察对象：</span><span id="commitment-period"></span>
          </li>
          <li>
            <span>监察类型：</span><span id="is-overdue"></span>
          </li>
          <li>
            <span>附件资料</span><a class="download" href="" download="">附件下载</a>
          </li>
        </ul>
        <div class="progress-wrap">
          <span class="progress-text">当前进度</span>
          <div class="progress-container">
            <div class="progress-bar"></div>
          </div>
          <span class="progress-percent">45%</span>
        </div>
      </div>
      <div class="button">
        <button id="closeDetail">关闭</button>
      </div>
    </div>
  </div>
  <!-- 通过遮罩层 -->
  <div class="overlay" id="passOverlay">
    <div class="passpopup">
      <div>审核监察</div>
      <div>确认通过？</div>
      <div>
        <div class="button">
          <button>取消</button>
          <button>确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 驳回遮罩层 -->
  <div class="overlay" id="overruleOverlay">
    <div class="overrulepopup">
      <div>审核监察</div>
      <div>确认驳回？</div>
      <div>
        <div class="button">
          <button>取消</button>
          <button>确定</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/quill/1.3.6/quill.js"></script>
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });
    const data = [
      { id: 1, object: "个人", type: "证照信息监察", contact: "13523456789", attachment: "example.pdf", uname: "张三", progress: 34 },
      { id: 2, object: "企业", type: "行政审批监察", contact: "13123456789", attachment: "example.pdf", uname: "腾讯", progress: 78 },
      { id: 3, object: "个人", type: "收费监察", contact: "13823456789", attachment: "example.pdf", uname: "张三", progress: 12 },
      { id: 4, object: "企业", type: "时限监察", contact: "13323456789", attachment: "example.pdf", uname: "腾讯", progress: 100 },
      { id: 5, object: "个人", type: "收费监察", contact: "13623456789", attachment: "example.pdf", uname: "张三", progress: 55 },
      { id: 6, object: "企业", type: "证照信息监察", contact: "13023456789", attachment: "example.pdf", uname: "腾讯", progress: 23 },
      { id: 7, object: "个人", type: "行政审批监察", contact: "13923456789", attachment: "example.pdf", uname: "张三", progress: 87 },
      { id: 8, object: "企业", type: "收费监察", contact: "13723456789", attachment: "example.pdf", uname: "腾讯", progress: 45 },
      { id: 9, object: "个人", type: "证照信息监察", contact: "13423456789", attachment: "example.pdf", uname: "张三", progress: 66 }
    ];
    // const arr = JSON.parse(localStorage.getItem('data')) || []
    localStorage.setItem('data', JSON.stringify(data))
    const user = document.querySelector('.user');
    const check = document.querySelector('.check');
    const topbar = document.querySelector('.topbar');
    const monitoring = document.querySelector('.monitoring');
    const content1 = document.querySelector('.content1');
    const content2 = document.querySelector('.content2');
    const content3 = document.querySelector('.content3');
    const tbody = document.querySelector('.content2 tbody');
    const objectSelect = document.getElementById('objectSelect');
    const typeSelect = document.getElementById('typeSelect');
    const searchButton = document.querySelector('.search');
    const select1 = document.querySelector('.content1 .tableindex select');
    const select2 = document.querySelector('.content2 .tableindex select');
    const select3 = document.querySelector('.content3 .tableindex select');
    const btn1 = document.querySelector('.content1 .btn');
    const btn2 = document.querySelector('.content2 .btn');
    const btn3 = document.querySelector('.content3 .btn');
    const allcard = document.querySelector('.allcard');
    const userTbody = document.querySelector('.content1 tbody');


    // 分页显示
    const itemsPerPage = 8;
    let userCurrentPage = 1;
    const totalPages = Math.ceil(data.length / itemsPerPage);

    function renderUser() {
      const startIndex = (userCurrentPage - 1) * itemsPerPage;
      const endIndex = startIndex + itemsPerPage;
      const currentPageData = data.slice(startIndex, endIndex);
      userTbody.innerHTML = '';

      for (let i = 0; i < currentPageData.length; i++) {
        userTbody.innerHTML += `
        <tr>
                <td>${currentPageData[i].id}</td>
                <td>${currentPageData[i].uname}</td>
                <td>${currentPageData[i].object}</td>
                <td>${currentPageData[i].contact}</td>
                <td>
                  <button class="frozen">冻结</button>
                  <button class="unfrozen">解冻</button>
                </td>
              </tr>
        `
      }
    }
    renderUser()

    let tableCurrentPage = 1;
    function renderTable() {
      const startIndex = (tableCurrentPage - 1) * itemsPerPage;
      const endIndex = startIndex + itemsPerPage;
      const currentPageData = data.slice(startIndex, endIndex);
      tbody.innerHTML = '';

      for (let i = 0; i < currentPageData.length; i++) {
        tbody.innerHTML += `
            <tr>
              <td>${currentPageData[i].id}</td>
              <td>${currentPageData[i].object}</td>
              <td>${currentPageData[i].type}</td>
              <td>${currentPageData[i].contact}</td>
              <td>
                <button class="detail" data-attachment="${currentPageData[i].attachment}" data-id="${currentPageData[i].id}">详情</button>
                <button class="pass">通过</button>
                <button class="overrule">驳回</button>
              </td>
              <td>
                <button class="delete" data-id="${currentPageData[i].id}"">ⓧ</button>
              </td>
            </tr>
          `;
      }
    }
    renderTable();

    const itemsPerPage2 = 6;
    let cardCurrentPage = 1;
    function rendercard() {
      const totalPages2 = Math.ceil(data.length / itemsPerPage2);
      const startIndex2 = (cardCurrentPage - 1) * itemsPerPage2;
      const endIndex2 = startIndex2 + itemsPerPage2;
      const currentPageData2 = data.slice(startIndex2, endIndex2);


      for (let i = 0; i < currentPageData2.length; i++) {
        const progress = currentPageData2[i].progress;
        const isComplete = progress === 100;
        const progressStyle = `background: conic-gradient(${isComplete ? '#5CB85C' : '#0066ff'} ${progress}%, #e0e0e0 0);`;
        allcard.innerHTML += `
      <div class="card">
          <div class="left">
            <ul>
              <li><span>监察编号:</span>${currentPageData2[i].id}</li>
              <li><span>监察用户:</span>${currentPageData2[i].uname}</li>
              <li><span>监察对象:</span>${currentPageData2[i].object}</li>
            </ul>
          </div>
          <div class="right">
              <div class="progress-circle" style="${progressStyle}">
                <span>${progress}%</span>
              </div>
            </div>
      </div>
     
      `
      }
    }
    rendercard();



    // 搜索功能
    searchButton.addEventListener('click', function () {
      const selectedObject = objectSelect.value;
      const selectedType = typeSelect.value;

      data = data.filter(item => {
        return (selectedObject === 'all' || item.object === selectedObject) &&
          (selectedType === 'all' || item.type === selectedType);
      });

      currentPage = 1;
      renderTable();
    });

    // 切换页面
    user.addEventListener('click', function () {
      user.classList.add('active');
      check.classList.remove('active');
      monitoring.classList.remove('active');
      topbar.innerHTML = '用户管理';
      content1.style.display = 'flex';
      content2.style.display = 'none';
      content3.style.display = 'none';
    });

    check.addEventListener('click', function () {
      check.classList.add('active');
      user.classList.remove('active');
      monitoring.classList.remove('active');
      topbar.innerHTML = '检查内容管理';
      content1.style.display = 'none';
      content2.style.display = 'flex';
      content3.style.display = 'none';
    });

    monitoring.addEventListener('click', function () {
      monitoring.classList.add('active');
      user.classList.remove('active');
      check.classList.remove('active');
      topbar.innerHTML = '监控管理';
      content1.style.display = 'none';
      content2.style.display = 'none';
      content3.style.display = 'flex';
    });

    // 下一页功能
    const nextButton1 = document.querySelector('.content1 .next');
    const nextButton2 = document.querySelector('.content2 .next');
    const nextButton3 = document.querySelector('.content3 .next')

    nextButton1.addEventListener('click', function () {
      if (userCurrentPage < totalPages) {
        userCurrentPage++;
        userTbody.innerHTML = '';
        renderUser();
        btn1.innerHTML = userCurrentPage;
        select1.value = userCurrentPage;
      }
    });

    nextButton2.addEventListener('click', function () {
      if (tableCurrentPage < totalPages) {
        tableCurrentPage++;
        tbody.innerHTML = '';
        renderTable();
        btn2.innerHTML = tableCurrentPage;
        select2.value = tableCurrentPage;
      }
    });
    nextButton3.addEventListener('click', function () {
      if (cardCurrentPage < totalPages) {
        cardCurrentPage++;
        allcard.innerHTML = '';
        rendercard();
        btn3.innerHTML = cardCurrentPage;
        select3.value = cardCurrentPage;
      }
    })
    // 上一页功能
    const prevButton1 = document.querySelector('.content1 .prev');
    const prevButton2 = document.querySelector('.content2 .prev');
    const prevButton3 = document.querySelector('.content3 .prev');

    prevButton1.addEventListener('click', function () {
      if (userCurrentPage > 1) {
        userCurrentPage--;
        userTbody.innerHTML = '';
        renderUser();
        btn1.innerHTML = userCurrentPage;
        select1.value = userCurrentPage;
      }
    });

    prevButton2.addEventListener('click', function () {
      console.log(tableCurrentPage);
      if (tableCurrentPage > 1) {
        tableCurrentPage--;
        tbody.innerHTML = '';
        renderTable();
        btn2.innerHTML = tableCurrentPage;
        select2.value = tableCurrentPage;
      }
    });
    prevButton3.addEventListener('click', function () {
      if (cardCurrentPage > 1) {
        cardCurrentPage--;
        allcard.innerHTML = '';
        rendercard();
        btn3.innerHTML = cardCurrentPage;
        select3.value = cardCurrentPage;
      }
    })

    // 下拉菜单
    for (let i = 1; i <= totalPages; i++) {
      select1.innerHTML += `<option value="${i}">${i}</option>`
    }
    select1.addEventListener('change', function () {
      userCurrentPage = parseInt(select1.value);
      userTbody.innerHTML = '';
      renderUser();
      btn1.innerHTML = userCurrentPage;
    })

    for (let i = 1; i <= totalPages; i++) {
      select2.innerHTML += `<option value="${i}">${i}</option>`
    }
    select2.addEventListener('change', function () {
      tableCurrentPage = parseInt(select2.value);
      tbody.innerHTML = '';
      renderTable();
      btn2.innerHTML = tableCurrentPage;
    })

    for (let i = 1; i <= totalPages; i++) {
      select3.innerHTML += `<option value="${i}">${i}</option>`
    }
    select3.addEventListener('change', function () {
      cardCurrentPage = parseInt(select3.value);
      allcard.innerHTML = '';
      rendercard();
      btn3.innerHTML = cardCurrentPage;
    })

    //新建监察
    const create = document.querySelector('.create');
    const overlay = document.getElementById('overlay');
    create.addEventListener('click', function () {
      overlay.style.display = 'flex';
    })
    const theme = document.querySelector('.theme');
    const contact = document.querySelector('.contact');
    const popupObjectSelect = document.getElementById('popupObjectSelect')
    const popupTypeSelect = document.getElementById('popupTypeSelect');
    const confirmButton = document.querySelector('.confirm');
    function claearvalue() {
      theme.value = '';
      contact.value = '';
      popupObjectSelect.value = 'all';
      popupTypeSelect.value = 'all';
      quill.setText('');
    }
    confirmButton.addEventListener('click', function (e) {
      e.preventDefault();
      if (!contact.value || !popupObjectSelect.value || !popupTypeSelect.value) {
        alert('输入内容不能为空');
      } else {
        data.push({
          id: data.length + 1,
          object: popupObjectSelect.value,
          type: popupTypeSelect.value,
          contact: contact.value,
          attachment: '',
          progress: 0,
          uname: '张三',
        });
        claearvalue
        overlay.style.display = 'none';
        alert('添加成功');
        console.log(data);
        renderTable();
      }
    });
    //关闭创建弹窗
    const closebutton = document.querySelector('.button button:nth-child(1)');
    closebutton.addEventListener('click', function () {
      claearvalue()
      overlay.style.display = 'none'
    })

    // 删除监察
    const tasklist = document.querySelector('.tasklist');
    tasklist.addEventListener('click', function (e) {
      if (e.target.classList.contains('delete')) {
        if (confirm('你确定要删除这条数据吗')) {
          data.splice(e.target.dataset.id - 1, 1)
          renderTable()
        }
      }
    })

    //详情监察按钮
    const detailOverlay = document.getElementById('detailOverlay');
    const downloadButton = document.querySelector('.download');
    tasklist.addEventListener('click', function (e) {
      if (e.target.classList.contains('detail')) {
        detailOverlay.style.display = 'flex';
        const attachment = e.target.dataset.attachment;
        downloadButton.download = attachment;
        const id = parseInt(e.target.dataset.id);
        const item = data.find(item => item.id === id);
        if (item) {
          document.getElementById('acceptance-number').textContent = ''; // 监察主题无对应信息
          document.getElementById('acceptance-time').textContent = item.contact;
          document.getElementById('commitment-period').textContent = item.object;
          document.getElementById('is-overdue').textContent = item.type;
          document.getElementById('applicant').textContent = ''; // 当前状态无对应信息
          downloadButton.href = item.attachment;
        }
      };
    })

    //通过按钮
    const passOverlay = document.getElementById('passOverlay');
    const colsepass = document.querySelector('.passpopup .button button:nth-child(1)')
    const submitpass = document.querySelector('.passpopup .button button:nth-child(2)')
    tasklist.addEventListener('click', function (e) {
      if (e.target.classList.contains('pass')) {
        passOverlay.style.display = 'flex';
      }
    })
    colsepass.addEventListener('click', function () {
      passOverlay.style.display = 'none'
    })
    submitpass.addEventListener('click', function () {
      passOverlay.style.display = 'none'
      alert('通过成功')
    })

    //驳回按钮
    const overruleOverlay = document.getElementById('overruleOverlay');
    const colseoverrule = document.querySelector('.overrulepopup .button button:nth-child(1)')
    const submitoverrule = document.querySelector('.overrulepopup .button button:nth-child(2)')
    tasklist.addEventListener('click', function (e) {
      if (e.target.classList.contains('overrule')) {
        overruleOverlay.style.display = 'flex';
      }
    })
    colseoverrule.addEventListener('click', function () {
      overruleOverlay.style.display = 'none'
    })
    submitoverrule.addEventListener('click', function () {
      overruleOverlay.style.display = 'none'
      alert('驳回成功')
    })

    //关闭详情弹窗
    const closeDetail = document.querySelector('#closeDetail');
    closeDetail.addEventListener('click', function () {
      detailOverlay.style.display = 'none'
    })

    //冻结按钮
    const frozen = document.querySelector('.frozen');
    const usermanage = document.querySelector('.usermanage');
    usermanage.addEventListener('click', function (e) {
      if (e.target.classList.contains('frozen')) {
        if (confirm('你确定要冻结这条数据吗')) {
          const row = event.target.closest('tr');
          row.classList.add('active');

        }
      }
    })

    // 解冻按钮
    const unfrozen = document.querySelector('.unfrozen');
    usermanage.addEventListener('click', function (e) {
      if (e.target.classList.contains('unfrozen')) {
        if (confirm('你确定要解冻这条数据吗')) {
          const row = event.target.closest('tr');
          row.classList.remove('active');

        }
      }
    })

    // 退出登录
    const logout = document.querySelector('.login-button');
    logout.addEventListener('click', function () {
      window.location.href = './登录注册.html';
    });
  </script>
</body>

</html>